<template>
    <div>
        <input class="password-input" v-model="password" :type="content.canSee?'text':'password'" :placeholder="content.placeholder" minlength="6" maxlength="20">
    </div>
</template>

<script>
    export default {
        name: "checkPassword",
        props:{
            propsContent:{
                type:Object
            }
        },
        data(){
            return{
                content:{
                    canSee:false,
                    placeholder:'请输入6-20位密码',
                },
                password:null,
                passwordObj:{password:'',passwordTrue:false}
            }
        },
        mounted(){
            this.content = Object.assign({},this.content,this.propsContent);
        },
        methods:{
            checkPassword(){
                if(this.password.toString().length >= 6 && this.password.toString().length <= 20){
                    this.passwordObj.passwordTrue = true;
                }else{
                    this.passwordObj.passwordTrue = false;
                }
                this.passwordObj.password = this.password;
                this.$emit('checkPassword',this.passwordObj);
            }
        },
        watch:{
            propsContent(newVal){
                console.log(newVal)
                this.content = Object.assign({},this.content,newVal);
            },
            password(newVal,oldVal){
                if( newVal.toString().length > 20 ){
                    this.password = newVal.slice(0,20);
                }
                this.checkPassword();
                // this.obj
            }
        }
    }
</script>

<style scoped>
    .password-input{
        height:.3rem;
        width: 100%;
    }
    .password-input::-webkit-input-placeholder,.password-input::placeholder{
        color: #CCCCCC;
        font-size: .16rem;
    }
</style>